<template>
	<view>
		<view class="grace-news-list" style="width:94%; padding:5px 3%;">
			<view v-for="(item, index) in payOrders" :key="index" >
				<view class="grace-news-list-items">
					<view class="grace-news-list-title">
						<view class="grace-news-list-title-main">{{index+1}}. {{item.resourcesTitle}}</view>
						<text class="grace-news-list-title-desc grace-text-overflow">
							订单号：{{item.orderNumber}} 日期：{{item.createTime}}
						</text>
						<text class="grace-news-list-title-desc grace-text-overflow">
							金额：￥{{item.resourcesMoney}} 状态：{{item.status==0?'支付成功':'待支付'}} 支付方式：{{item.payWay=='we_chat'?'微信':(item.payWay=='alipay'?'支付宝':(item.payWay=='balance'?'余额':''))}}
						</text>						
					</view>
				</view>
			</view>
			
		</view>
		<view style="text-align:center;" v-show="dataShow">数据为空</view>				
	</view>
</template>
<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';	
	var page = 1;
	export default {
		computed: {
			...mapState(['userInfo', 'hasLogin', 'loginProvider', 'openid'])
		},			
		data() {
			return {
				serverUrl: this.serverUrl,
				top: 0,
				// 当前选择的分类
				cateCurrentIndex: 0,
				// 演示文章数据
				payOrders: [],
				dataShow: false
			};
		},
		onLoad: function() {
			// #ifdef H5
			this.top = '44px';
			// #endif
			page = 1;
			this.getPayOrder();
		},
		//下拉刷新
		onPullDownRefresh: function() {
			// 重置分页及数据
			page = 1;
			this.payOrders = [];
			this.getPayOrder();
		},
		// 加载更多
		onReachBottom: function() {
			this.getPayOrder();
		},
		methods: {
			...mapMutations(['login', 'logout', 'setOpenid', 'setProvider']),			
			goDetail(id) {
// 				uni.navigateTo({
// 					url: "/pages/social/detail/detail?id=" + id,
// 				})
			},			
			// 数据和分页是模拟的实际也是这样写
			getPayOrder: function() {
				var hideload = 0;
				uni.showLoading();
				uni.request({
					url: this.serverUrl + 'user-api/getPayOrder',
					data: {
						username: this.userInfo.username,
						pageNumber: page,
						pageSize: 12,
					},
					header: {
						"content-type": "application/x-www-form-urlencoded; charset=UTF-8"
					},
					method: "POST",
					success: (r) => {
						//console.log(r);
						if (r.data.code == '000000') {
							// 假设已经到底， 实际根据api接口返回值判断
							if (r.data.data.length < 1) {
								hideload = 1;
								uni.hideLoading();
								if (this.payOrders.length < 1) {
									this.dataShow = true;
								}else{
									uni.showToast({
										title: "已经加载全部",
										icon: "none",
										duration: 1500
									});
								}
								return;
							}else{
								this.dataShow = false;
							}
							for (var i = 0; i < r.data.data.length; i++) {
								this.payOrders = this.payOrders.concat(r.data.data[i]);
							}
							page++;
						} else {
							uni.showToast({
								title: r.data.message
							});
						}
					},
					complete: r => {
						if (hideload == 0) {
							uni.hideLoading();
						}
						uni.stopPullDownRefresh();
					}
				});
			}
		}
	}
</script>
<style>
/* 分段器头部 fixed 定位 */
.fixedit{width:100%; position:fixed; z-index:99; left:0; top:0;}
.grace-news-list-imgs{max-height:68px; overflow:hidden;}
</style>